<template>
	<view class="container">
		<view class="title">选择星座</view>
		<view class="zodiac-list">
			<view class="zodiac-item" 
				v-for="(item, index) in zodiacList" 
				:key="index"
				@tap="selectZodiac(item)">
				<text>{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
const zodiacList = [
	'白羊座', '金牛座', '双子座', 
	'巨蟹座', '狮子座', '处女座',
	'天秤座', '天蝎座', '射手座', 
	'摩羯座', '水瓶座', '双鱼座'
]

const selectZodiac = (zodiac) => {
	// 获取页面栈
	const pages = getCurrentPages()
	const prevPage = pages[pages.length - 2]
	
	// 调用上一页的更新方法，更新星座值
	if (prevPage && prevPage.$vm) {
		// 更新上一页的 selectedZodiac 值
		prevPage.$vm.updateZodiac(zodiac)
		
		// 显示选择成功提示
		uni.showToast({
			title: `已选择${zodiac}`,
			icon: 'none',
			duration: 1500
		})
		
		// 延迟返回上一页
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}
}
</script>

<style>
.container {
	padding: 20px;
}

.title {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
}

.zodiac-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.zodiac-item {
	width: calc(33.33% - 10px);
	height: 100px;
	background-color: #007AFF;
	color: white;
	margin-bottom: 15px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zodiac-item:active {
	background-color: #0056b3;
}
</style>
